<template>
	<view class="examineInfo">
		<view class="title">
			审核信息
			<u-tag :text="verifyInfo.examineType === 1 ? '固定审批流' : '授权审批人'" mode="dark" type="warning" shape="circle" size="mini" />
		</view>
		<view class="panel">
			<!-- 审批人 -->
			<!-- 固定审批 -->
			<view class="list" v-if="verifyInfo.examineType === 1">
				<view class="item" v-for="(v, k) in verifyInfo.examineSteps" :key="k">
					<view class="bd">
						<u-image src="/static/img/examine_head.png" width="40px" height="40px" class="avatar"></u-image>
						<view class="detail">{{ v | detailName }}</view>
						<view class="step">{{ (k + 1) | stepName }}</view>
					</view>
					<u-icon v-if="verifyInfo.examineSteps.length - 1 != k" name="arrow-right" size="30px" color="#dfdfdf"></u-icon>
				</view>
			</view>
			<!-- 授权审批 -->
			<view class="list" v-if="verifyInfo.examineType === 2">
				<view class="item" v-for="(v, k) in verifyInfo.examineSteps" :key="k">
					<view class="bd">
						<u-image :src="v.examinUser.img" width="40px" height="40px" class="avatar"></u-image>
					</view>
					<u-icon v-if="verifyInfo.examineSteps.length - 1 != k" name="arrow-right" size="30px" color="#dfdfdf"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Nzhcn from 'nzh/cn';
export default {
	name: 'examineInfo',
	props: {
		type: {
			type: [String, Number],
			default() {
				return 5;
			},
		},
	},
	filters: {
		statusIcon(status) {
			// 0失败，1通过，2撤回，3创建，4待审核
			// JAVA 0 未审核 1 审核通过 2 审核拒绝 3 审核中 4 已撤回 5 创建 6 待提交
			if (status == 2) {
				return require('@/static/img/check_fail.png');
			} else if (status == 1) {
				return require('@/static/img/check_suc.png');
			} else if (status == 4) {
				return require('@/static/img/check_revoke.png');
			} else if (status == 3) {
				return require('@/static/img/check_create.png');
			} else if (status == 0 || status == 6) {
				return require('@/static/img/check_wait.png');
			} else if (status == 5) {
				return require('@/static/img/check_create.png');
			}
			return '';
		},
		stepName(index) {
			return '第' + Nzhcn.encodeS(index) + '级';
		},
		detailName(data) {
			if (data.stepType == 2) {
				return data.userList.length + '人或签';
			} else if (data.stepType == 3) {
				return data.userList.length + '人会签';
			} else if (data.stepType == 1) {
				return '负责人主管';
			} else if (data.stepType == 4) {
				return '上一级审批人主管';
			} else if (data.stepType == 5) {
				return '创建人';
			} else if (data.stepType == 6) {
				return '部门负责人';
			}
		},
	},
	data() {
		return {
			verifyInfo: {},
		};
	},
	mounted() {
		this.getVerifyInfo();
	},
	methods: {
		// 获取审核信息
		async getVerifyInfo() {
			let data = {
				categoryType: this.type,
			};
			let res = await this.$api.customer.common.verifyInfo(data);
			if (res.code === 200) {
				this.verifyInfo = res.data || {};
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.title {
	padding: 15px 15px 10px;
}
.panel {
	background: #fff;
	padding: 15px;
}
.list {
	display: flex;
	overflow-y: auto;
	.item {
		display: flex;
		padding: 10px 5px;
		.bd {
			text-align: center;
			padding-right: 20px;

			.avatar {
				display: inline-block;
			}
			.detail {
				font-size: 12px;
				margin-top: 8px;
				color: #999;
			}
		}
	}
}
</style>